<template>
    <div class="box box-1">
      <zuj1 @arr1="arr1"></zuj1>
      <div>
        <zuj2 :arr="arr" @num1="num1"> </zuj2>
      </div>
      <zuj3 style="margin-top: 20px; width: 560px" :num="num" :arr="arr" :arrcomplete1="arrcomplete1"></zuj3>
    </div>
  </template>
  <script>
  import zuj1 from "./components/小作业1/1.vue";
  import zuj2 from "./components/小作业1/2.vue";
  import zuj3 from "./components/小作业1/3.vue";
  export default {
    data() {
      return {
        arr: [
          
          // { name: "吃饭", complete: false },
          // { name: "睡觉", complete: false },
        ],
        num: 0,
        arrcomplete1:false
      };
    },
    components: {
      zuj1,
      zuj2,
      zuj3,
    },
  
    created() {
      this.arr=JSON.parse(localStorage.getItem('data'))
    },
    computed: {},
    watch: {
  
      arr: {
        handler(newVlaue, ol) {
          let shu = 0;
          for (let i = 0; i < this.arr.length; i++) {
            if (this.arr[i].complete == true) {
              shu += 1;
            }
          }
          this.num = shu;
  
        },
        immediate: true, //一进入页面就执行handler里的代码
        deep: true,
      },
    },
    methods: {
      // arrcomplete(val){
      //   this.arrcomplete1=val
      //   console.log(this.arrcomplete1);
      // },
     
      arr1(val) {
        this.arr.unshift(val); 
        localStorage.setItem('data', JSON.stringify(this.arr)) 
      },
      num1(val) {
        this.num = val;
      },
    },
  };
  </script>
  <style lang='less' scoped>
  .box {
    width: 600px;
    margin: 0 auto;
  
    // outline: 1px solid #ddd;
  }
  .box-1 {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .box2 {
    width: 560px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  </style>
  
  